<!--
 * @Author: wupeiwen <javapeiwen2010@gmail.com>
 * @Date: 2023-06-12 16:46:30
 * @LastEditors: wupeiwen <javapeiwen2010@gmail.com>
 * @LastEditTime: 2023-06-30 15:37:07
 * @FilePath: /tea-garden-web/src/pages/smart-suggestion.vue
 * @Description: 智能建议
-->
<template>
  <div class="smart-suggestion">
    <div class="top-area">
      <i class="icon-button-back" @click="$router.push({ name: 'baseOverview' })" />
      <span class="page-name">农事建议</span>
    </div>
    <div class="content-area">
      <el-skeleton :loading="loading.allAdvice" animated>
        <template #template>
          <section class="suggestion-card" variant="text" v-for="index in 3" :key="index">
            <section class="record-title">
              <el-skeleton-item variant="text" class="record-content-item" />
            </section>
            <section class="record-content">
              <el-skeleton-item variant="text" class="record-content-item" />
              <el-skeleton-item variant="text" class="record-content-item" />
              <el-skeleton-item variant="text" class="record-content-item" />
            </section>
          </section>
        </template>
        <template #default v-if="allAdvice.length === 0">
          <section style="width: 100%; margin-top: 40px; text-align: center; color: #333333;">暂无农事智能建议</section>
        </template>
        <template #default v-else-if="allAdvice.length > 0">

          <section class="suggestion-card" v-for="(recordData, index) in allAdvice" :key="index">
            <section class="record-title">
              <span class="record-type">农事智能建议</span>
              <!-- <span class="record-buttons">
                <el-button type="text" @click="handleFramingOperate('showAddDialog',recordData)">创建农事任务</el-button>
              </span> -->
            </section>
            <section class="record-content">
              <!-- <section class="record-content-item">
                <span class="record-content-item-name">农事类型：</span>
                <span class="record-content-item-value">{{ getDictItemNameById(recordData.farming_type) }}</span>
              </section> -->
              <section class="record-content-item">
                <span class="record-content-item-name">建议：</span>
                <span class="record-content-item-value">{{ recordData.suggest }}</span>
              </section>
              <!-- <section class="record-content-item" v-if="showKindLabel(recordData.farming_type)">
                <span class="record-content-item-name">{{ kindLabel(recordData.farming_type) }}：</span>
                <span class="record-content-item-value">{{ recordData.kind || '--' }}</span>
              </section>
              <section class="record-content-item" v-if="showQuantityLabel(recordData.farming_type)">
                <span class="record-content-item-name">{{ quantityLabel(recordData.farming_type) }}：</span>
                <span class="record-content-item-value">{{ recordData.quantity || '--' }}</span>
              </section> -->
              <section class="record-content-item">
                <span class="record-content-item-name">时间：</span>
                <span class="record-content-item-value">
                  <span>{{ recordData.date }}</span>
                  <!-- <span v-if="recordData.createTime">至{{ recordData.updateTime }}</span> -->
                </span>
              </section>
            </section>
          </section>
        </template>
      </el-skeleton>
    </div>
    <sction class="dialog-bg" v-if="visableDialog">
      <section class="dialog-window">
        <section class="dialog-header">
          <section class="name">{{ dialogName }}</section>
          <section class="icon-close" @click="handleFramingOperate('cancleDialog')"></section>
        </section>
        <section class="dialog-content">
          <el-steps class="steps" :active="form.step" align-center finish-status="success" v-if="dialogName === '新建农事计划'">
            <el-step title="农事类型" />
            <el-step title="农事详情" />
            <el-step title="人员与设备" />
          </el-steps>
          <section class="farming-detail" v-if="dialogName === '新建农事计划'">
            <el-form label-position="top" v-if="form.step === 1">
              <el-form-item label="地块">
                <el-select v-model="form.massif_ids" placeholder="选择地块" multiple clearable style="width: 100%;">
                  <el-option v-for="(item, index) in farmlands" :key="index" :label="item.massif_num"
                    :value="item.massif_id" />
                </el-select>
              </el-form-item>
              <el-form-item label="日期">
                <el-date-picker v-model="form.start_time" type="date" placeholder="选择日期" format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD" style="width: 100%;" />
              </el-form-item>
              <el-form-item :label="kindLabel(form.farming_type)" v-if="showKindLabel(form.farming_type)">
                <el-input v-model="form.kind" placeholder="请输入" />
              </el-form-item>
              <el-form-item :label="quantityLabel(form.farming_type)" v-if="showQuantityLabel(form.farming_type)">
                <el-input v-model="form.quantity" placeholder="请输入" />
              </el-form-item>
            </el-form>
            <el-form label-position="top" v-if="form.step === 2">
              <el-form-item label="人员">
                <el-select v-model="form.user_ids" placeholder="选择人员" multiple clearable style="width: 100%;">
                  <el-option v-for="(item, index) in users" :key="index" :label="item.user_name" :value="item.id" />
                </el-select>
              </el-form-item>
              <el-form-item label="设备">
                <el-select v-model="form.device_ids" placeholder="选择设备" multiple clearable style="width: 100%;">
                  <el-option v-for="(item, index) in allEquipment" :key="index" :label="item.equipment_name"
                    :value="item.id" />
                </el-select>
              </el-form-item>
            </el-form>
          </section>
        </section>
        <section class="dialog-footer" v-if="dialogName === '新建农事计划'">
          <el-button class="button1" v-if="form.step !== 1" @click="handleFramingOperate('previousStep')">上一步</el-button>
          <el-button class="button2" v-if="form.step !== 2" @click="handleFramingOperate('nextStep')">下一步</el-button>
          <el-button class="button2" v-if="form.step === 2" @click="handleFramingOperate('addFarmingPlan')">确认</el-button>
        </section>
      </section>
    </sction>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex'
export default {
  computed: {
    ...mapState('smart-suggestion', ['loading', 'allAdvice']),
    ...mapGetters('common', ['getDictItemNameById']),
    ...mapState('farming-calendar', ['farmlands']),
    ...mapState('base-overview', ['currentId', 'allEquipment']),
    ...mapState('manager-person', ['users'])
  },
  data () {
    return {
      // 显示弹窗
      visableDialog: false,
      // 弹窗名称
      dialogName: '',
      // 弹窗表单
      initForm: {
        setp: '',
        farming_type: '',
        massif_ids: [],
        is_time_range: 2,
        start_time: '',
        end_time: '',
        kind: '',
        quantity: '',
        user_ids: [],
        device_ids: [],
        // 13 待执行 14待发布 15待检查
        status_: 15,
        is_warn: '',
        warn_notice_time: '',
        warn_notice_content: '',
        is_task: '',
        task_notice_time: '',
        task_notice_user: '',
        task_notice_phone: '',
        task_notice_content: ''
      },
      form: {}
    }
  },
  methods: {
    ...mapActions('smart-suggestion', ['getAllAdvice']),
    ...mapActions('farming-calendar', ['getFarmlands', 'AddFarmingPlan']),
    ...mapActions('manager-person', ['getUsers']),
    ...mapActions('base-overview', ['getAllEquipment']),
    showKindLabel (farmingType) {
      return [4, 9].findIndex((item) => item === farmingType) !== -1
    },
    kindLabel (farmingType) {
      let label = ''
      switch (farmingType) {
        case 4:
          label = '肥料类型'
          break
        case 9:
          label = '药剂类型'
          break
      }
      return label
    },
    showQuantityLabel (farmingType) {
      return [3, 4, 5, 9].findIndex((item) => item === farmingType) !== -1
    },
    quantityLabel (farmingType) {
      let label = ''
      switch (farmingType) {
        case 3:
          label = '采摘量'
          break
        case 4:
          label = '施肥量'
          break
        case 5:
          label = '灌溉量'
          break
        case 9:
          label = '药剂量'
          break
      }
      return label
    },
    // 农事相关操作
    async handleFramingOperate (type, val) {
      switch (type) {
        case 'showAddDialog':
          this.dialogName = '新建农事计划'
          this.form = Object.assign({ step: 1 }, this.initForm, val)
          this.visableDialog = true
          break
        case 'cancleDialog':
          this.visableDialog = false
          this.dialogName = ''
          break
        case 'nextStep':
          this.form.step = this.form.step + 1
          break
        case 'previousStep':
          this.form.step = this.form.step - 1
          break
        case 'addFarmingPlan':
          await this.AddFarmingPlan(this.form)
          this.handleFramingOperate('cancleDialog')
          break
      }
    }
  },
  created () {
    this.getAllAdvice()
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.getFarmlands()
      vm.getUsers()
      vm.getAllEquipment()
    })
  }
}
</script>

<style lang="scss">
.smart-suggestion {
  height: 100%;
  background: #eff7f8;
  position: relative;

  .top-area {
    position: relative;
    top: 10px;
    .icon-button-back {
      cursor: pointer;
      width: 18px;
      height: 18px;
      background-image: url("/public/image/common/icon-button-back-03.png");
      background-size: cover;
      position: absolute;
      left: 27px;
      top: 30.5px;
    }

    .page-name {
      font-size: 18px;
      font-family: PingFang SC-Heavy, PingFang SC;
      font-weight: 800;
      color: #089bab;
      height: 25px;
      width: 100px;
      text-align: center;
      position: absolute;
      left: 52px;
      top: 27px;
    }
  }

  .content-area {
    width: calc(100% - 20px);
    height: 620px;
    position: absolute;
    left: 10px;
    bottom: 10px;
    padding: 16px;
    overflow-y: auto;

    .suggestion-card {
      max-height: 300px;
      padding: 25px 25px 25px 92px;
      background: #FFFFFF;
      border-radius: 15px 15px 15px 15px;
      margin-bottom: 20px;

      &:last-of-type {
        margin-bottom: 0;
      }

      position: relative;

      &::before {
        content: '';
        position: absolute;
        left: 25px;
        top: 25px;
        width: 50px;
        height: 50px;
        background-size: cover;
        background-image: url("/public/image/base-overview/icon-10.png");
      }

      .record-title {
        .record-type {
          display: inline-block;
          vertical-align: top;
          width: 50%;
          font-size: 18px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: bold;
          color: #FEAD54;
          line-height: 21px;
        }

        .record-buttons {
          display: inline-block;
          width: 50%;
          font-size: 16px;
          font-family: PingFang SC-Medium, PingFang SC;
          text-align: right;
        }

        margin-bottom: 25px
      }

      .record-content {
        .record-content-item {
          font-size: 16px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          line-height: 19px;
          margin-bottom: 15px;

          &:last-of-type {
            margin-bottom: 0;
          }

          .record-content-item-name {
            color: #979797;
          }

          .record-content-item-value {
            color: #333333;
          }
        }
      }
    }
  }

  .dialog-bg {
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
    height: 100%;
    background: rgba(18, 26, 45, 0.2);

    .dialog-window {
      position: relative;
      width: 605px;
      height: 721px;
      margin: 39.5px auto;
      background: #FFFFFF;
      border-radius: 10px;

      .dialog-header {
        height: 60px;

        .name {
          position: absolute;
          left: 27.5px;
          top: 27px;
          height: 16px;
          line-height: 16px;
          font-size: 16px;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: #333333;
        }

        .icon-close {
          background: url("/public/image/farming-calendar/icon-dialog-close.png");
          background-size: cover;
          width: 35.5px;
          height: 35.5px;
          position: absolute;
          right: 17.5px;
          top: 20.5px;
          cursor: pointer;
        }
      }

      .dialog-content {
        height: calc(100% - 60px - 72px);

        .farming-types {
          width: 174px;
          margin: 30px auto 0 auto;

          .type-button {
            width: 174px;
            height: 39px;
            border-width: 1px;
            border-style: solid;
            border-radius: 8px;
            margin-top: 18px;
            cursor: pointer;
            text-align: center;
            line-height: 39px;
          }
        }

        .farming-detail {
          width: 450px;
          margin: 30px auto 0 auto;
        }

        .farming-list {
          padding: 14px 50px 0 50px;
          overflow-y: auto;

          .farmland {
            color: #9cd7dd;
            display: inline-block;

            &::before {
              content: '地块:';
              display: inline-block;
              vertical-align: top;
              margin-right: 6px;
              color: #979797;
            }
          }

          .farming-date {
            color: #9cd7dd;
            display: inline-block;
            text-align: right;

            &::before {
              content: '日期:';
              display: inline-block;
              vertical-align: top;
              margin-right: 6px;
              color: #979797;
            }
          }

          .farming {
            width: 507px;
            height: 183px;
            border-radius: 5px;
            box-shadow: 0 2px 10px 0.5px rgba(0, 0, 0, 0.1);
            margin: 8px 0;
            padding: 15px 20px;
          }
        }
      }

      .dialog-footer {
        height: 72px;
        text-align: center;

        .button1 {
          background: #EBF7F8;
          color: #089BAB;
        }

        .button2 {
          background: #089BAB;
          color: #FFFFFF;
        }
      }
    }
  }
}
</style>
